<template>
    <div class="couponsV_1">
        <div class="positionR">
            <img class="coupons-close" @click="getCloseCounpons" ref="couponClose" :src="staticImageUrl('images/coupon_close.png')" alt="">
        </div>
        <ul class="coupons1_0-ul" ref="couponsUl" :style="{height:templates.length == 0 ? '100%' : 'auto'}">
            <!--TODO 这里不能收起了优惠券之后没有删除他的父类li -->
            <li class="coupons1_0-item" v-for="(template,index) in templates">
                <div class="coupons1_0-citem" ref="couponItem" @click="getTemplate(index,{templateId:template.templateId,state:template.state,promotionId:template.promotionId})">
                    <coupon-item :cardItemMsgProps="template"></coupon-item>
                </div>
            </li>
           <li class="positionR coupons1_0-get-wbtn">
                <transition name="getAllCouponsName"
                            enter-active-class="animated zoomIn"
                            leave-active-class="animated zoomOut">
                    <span class="coupons1_0-get-btn" v-if="getAllCoupons" @click="getAllCounponsFn(templates)">全部领取</span>
                </transition>
           </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "CouponsV_1",
        props:{
            couponsProps:Array
        },
        data() {
            return {
                getAllCoupons:false,
                templates:[],
                templateModel:{
                    promotionId:0,//推广id
                    storeIcon:'',//头像
                    templateId:0,//
                    state:0,
                    consume:'',
                    startTime:'',
                    endTime:'',
                    ticketType:1,
                    condition: {
                        // /*增值劵*/
                        // "initialScale": 0.5,      //----初始比例
                        // "max": 200,               //----增值上限
                        // "increment": 10,          //----增量(单次增长)
                        // "dayLimit": 2,             //----次数（人/日）
                        // /*其他劵公共*/
                        // "limitConsume": true,     //----是否限制最低消费
                        // "consumePrice": 100,      //----消费金额
                        // /*代金券*/
                        // "cashPrice": 20,           //----代金金额
                        // /*折扣券*/
                        // "discount": 8.5,           //----折扣
                        // /*赠品劵*/
                        // "gift": "烤羊肉3串",       //----赠品
                    },
                    whichcouponsModel:0,//那个模块
                },
                showMore:true,
                login:false,
                startTime:'',
                endTime:'',
            }
        },
        mounted(){
            this.init();
        },
        methods:{
            init(){
                let that = this;
                let tempObj = {};
                for(let value in that.couponsProps){
                    if( that.couponsProps ){
                        tempObj = Object.assign({},that.templateModel,that.couponsProps[value]);
                        that.templates.splice(value,1,tempObj);
                    }
                }
                this.login = this.isLogin();
                this.getAllCoupons = true;
                let time = 100;
                this.$refs.couponClose.style.transform = "scale(1)";
                setTimeout(()=>{
                    if(this.templates.length > 0){
                        for(let key in that.templates){
                            if( (that.templates.length - 4) <= key  ){
                                setTimeout(function () {
                                    that.$refs.couponItem[that.templates.length - key - 1].style.left = 0;
                                    that.$refs.couponItem[that.templates.length - key - 1].style.webkitTransform = "scale(1)";
                                    that.$refs.couponItem[that.templates.length - key - 1].style.transform = "scale(1)";
                                },time*key)
                            }else{
                                that.$refs.couponItem[that.templates.length - key - 1].style.left = 0;
                                that.$refs.couponItem[that.templates.length - key - 1].style.webkitTransform = "scale(1)";
                                that.$refs.couponItem[that.templates.length - key - 1].style.transform = "scale(1)";
                            }
                        }
                    }
                    /*让页面在底部显示*/
                    setTimeout(()=>{
                        let obj = this.$refs.couponsUl
                        this.scrollBottom(obj);
                    },50)
                },30)

            },
            /*批量领取*/
            getAllCounponsFn(obj){
                this.$emit('getAllCounponsFn',obj);
            },
            getCloseCounpons(){
                let that = this;
                let time = 100;
                for(let key in this.templates){
                    if( (that.templates.length - 4) <= key  ){
                        setTimeout(function () {
                            that.$refs.couponItem[that.templates.length - key - 1].style.left = "-120%";
                            that.$refs.couponItem[that.templates.length - key - 1].style.webkitTransform = "scale(.1)";
                            that.$refs.couponItem[that.templates.length - key - 1].style.transform = "scale(.1)";
                        },time*key)
                    }else{
                        that.$refs.couponItem[that.templates.length - key - 1].style.left = "-120%";
                        that.$refs.couponItem[that.templates.length - key - 1].style.webkitTransform = "scale(.1)";
                        that.$refs.couponItem[that.templates.length - key - 1].style.transform = "scale(.1)";
                    }
                }
                this.$refs.couponClose.style.transform = "scale(.1)";
                this.getAllCoupons = false;
                setTimeout(()=> {
                    this.$emit('suspensionCb',false);
                    this.$emit('showSuspensionFn');
                },600)

            },
            getTemplate(index,obj){
                this.$emit("getTemplate",index,obj);
            },
            templateHide(index,obj){
                if( !(obj.state == 3 || obj.state == 6 || obj.state == 5 || obj.state == 7 || obj.state == 8) ){
                    let that = this;
                    let scrollTop = 0;
                    if(that.$refs.couponsUl){
                        scrollTop = parseFloat(that.$refs.couponsUl.clientHeight);
                    }
                    let couponItemClassName = that.$refs.couponItem[index].className;
                    that.$refs.couponItem[index].className = couponItemClassName + ' transition1s';
                    let translateHeight = scrollTop + 90 * (that.templates.length - index);
                    that.$refs.couponItem[index].style.zIndex = 10;
                    that.$refs.couponItem[index].style.webkitTransform = "translate(1rem,"+translateHeight+"px) scale(.1)"
                    that.$refs.couponItem[index].style.transform = "translate(1rem,"+translateHeight+"px) scale(.1)"
                    setTimeout(()=> {
                        if(that.$refs.couponItem && that.$refs.couponItem[index]){
                            that.$refs.couponItem[index].className = couponItemClassName
                            that.$refs.couponItem[index].style.display = "none";
                        }
                        let isNotAllGet = false;
                        that.$refs.couponItem.forEach((value)=>{
                            if(value.style.display != "none"){
                                isNotAllGet = true;
                            }
                        })
                        if(!isNotAllGet){
                            this.$emit('suspensionCb',false);
                            this.$emit('showSuspensionFn');
                            console.log("领取完了");
                        }
                    },1000)
                }
            }
        },
        watch:{
            couponsProps:function (val) {
                let that = this;
                for(let value of val){
                    that.templates.splice(value,1,val[value]);
                }
            }
        },
        components:{
            'wx-share-body': ()=>import('../../../wx/WxShareBody.vue'),
            'coupon-item': ()=>import('../../../commonComponents/card/CartItem'),
        }
    }
</script>

<style scoped lang="scss">
    /*flex垂直居中*/
    .flexAlginItems {
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
    }

    .flexCenter {
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        -webkit-justify-content: center;
        align-items: center;
        -webkit-align-items: center;
    }

    .coupons1_0-item{
        margin-bottom: .1rem;
        height: .9rem;
        width: 3.55rem;
        position: relative;
    }
    .coupons-close{
        position: absolute;
        right: .1rem;
        top: -.5rem;
        width: .25rem;
        -webkit-transition: all 1.1s;
        -moz-transition: all 1.1s ;
        -o-transition: all 1.1s ;
        transition: all 1.1s ;
        -webkit-transform: scale(.1);
        -moz-transform: scale(.1);
        -ms-transform: scale(.1);
        -o-transform: scale(.1);
        transform: scale(.1);
    }
    .coupons1_0-citem {
        //盒子设置为flex
        left: -120%;
        position: absolute;
        top: 0;
        width: 100%;
        -webkit-transform: scale(.1);
        -moz-transform: scale(.1);
        -ms-transform: scale(.1);
        -o-transform: scale(.1);
        transform: scale(.1);
        -webkit-transition: all .6s;
        -moz-transition: all .6s ;
        -o-transition: all .6s ;
        transition: all .6s ;
        display: flex;
        display: -webkit-flex;
        background-color: #fff;
        border-radius: 5px;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        height: .9rem;
        .coupons1_0-wuse-msg, .coupons1_0-use-wcondition, .coupons1_0-wbtn, .coupons1_0-bottom {
            @extend .flexAlginItems;
        }
    }
    .transition1s{
        -webkit-transition: all 1s;
        -moz-transition: all 1s ;
        -o-transition: all 1s ;
        transition: all 1s ;
    }
    .coupons1_0-wshop-img {
        width: .75rem;
        height: .9rem;
        @extend .flexCenter
    }

    .coupons1_0-shop-img {
        width: .6rem;
        height: .6rem;
        border-radius: 50%;
        padding: .02rem;
        border: 1px solid #F0F0F0;
        box-sizing: border-box;
        object-fit: cover;
    }

    .coupons1_0-link-detail {
        -webkit-flex: 1;
        flex: 1;
    }

    .coupons1_0-use-msg {
        width: 100%;
        text-align: center;
    }

    .coupons1_0-money {
        color: #333;
        font-size: .1rem;
        font-weight: bold;
    }

    .coupons1_0-date {
        font-size: .11rem;
        color: #666;
    }

    .coupons1_0-reduce {
        color: #56B78C;
    }

    .coupons1_0-reduce, .coupons1_0-condition, .coupons1_0-date, .coupons1_0-money {
        width: 100%;
        text-align: center;
    }

    .coupons1_0-date, .coupons1_0-condition {
        color: #333333;
        font-size: .12rem;
        padding-top: .07rem;
        font-weight: bold;
    }

    .coupons1_0-wbtn {
        display: inline-block;
        border-left: dashed 1px #E6E6E6;
        color: #666666;
        @extend .flexCenter;
        width: .4rem;
        padding: 0 .13rem;
    }

    .store_has_loading {
        text-align: center;
        margin-top: .2rem;
    }

    .store-bottom-height {
        padding-bottom: .15rem;
    }
    .coupons1_0-ul{
        max-height: 3.5rem;
        overflow: auto;
    }
    .couponsV_1{
        position: fixed;
        left: .1rem;
        bottom: .1rem;
        z-index: 10;

    }
    .coupons1_0-get-wbtn{
        text-align: center;
        height: .4rem;
    }
    .coupons1_0-get-btn{
        position: relative;
        width: 1.2rem;
        display: inline-block;
        height: .4rem;
        line-height: .4rem;
        text-align: center;
        font-size: .15rem;
        color: #8BA9E8;
        background-color: #fff;
        -webkit-border-radius: .25rem;
        -moz-border-radius: .25rem;
        border-radius: .25rem;
    }
    .coupon-disabled{
        div{
            color: #ccc !important;
        }
    }
    .coupon-mark-img{
        position: absolute;
        top: 0;
        right: .4rem;
        width: .61rem;
    }
</style>